// 引入UI组件
import Count from "../pages/Count"
// 引入连接UI组件和store的方法
import { connect } from "react-redux"
// 引入用来操作对象的action
import { addAction, subtractAction, addAsyncAction } from "../redux/count_action"

/**
 * 1.mapStateToProps 返回的是一个普通对象
 * 2.返回对象的key作为props的key传递给UI组件，value作为props的value传递给UI组件
 * 3.接收到的state是redux中最新的状态
 * @param {Object} state 
 */
function mapStateToProps(state) {
    return {
        count: state
    }
}

/**
 * 1.mapDispatchToProps 返回的是一个对象，对象的属性值必须是方法
 * 2.方法用来操作redux中的状态
 * 3.mapDispatchToProps 用于传递操作状态的方法
 * @param {Function} dispatch 
 * @returns Object
 */
// function mapDispatchToProps(dispatch) {
//     return {
//         addAction: (value) => dispatch(addAction(value)),
//         subtractAction: (value) => dispatch(subtractAction(value)),
//         addAsyncAction: (value, time) => dispatch(addAsyncAction(value, time))
//     }
// }

/**
 * mapDispatchToProps 简写形成
 * 我们只需要写成对象，对象的属性值是 action 对象
 * react-redux 会自动帮我们完成分发更新状态
 */
const mapDispatchToProps = {
    addAction,
    subtractAction,
    addAsyncAction
}

// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(Count)
